<template>
  <view class="list" :style="{ height: pageHeight + 'px' }">
    <view class="filling_center">
      <view class="datas">
        <uni-datetime-picker
          v-model="range"
          type="daterange"
          :border="false"
          :clear-icon="false"
          rangeSeparator="至"
          @change="change"
        />
      </view>
      <view class="singular">
        <view class="">单数</view>
        <view class="">
          {{count}}
          <text>单</text>
        </view>
      </view>
      <view class="singular" v-if="state!='super'">
        <view class="">合计</view>
        <view class="">
          {{price}}
          <text>分</text>
        </view>
      </view>
    </view>

    <view class="proteList">
      <scroll-view
        scroll-y="true"
        enable-back-to-top
        @scrolltolower="loadMore"
        class="scroll-box"
        :style="{ height: Height + 'px' }"
      >
        <view class="proteTabs" v-for="(item, index) in orderLists" :key="index">
			<view>
				<text>{{type == 'League'?'':item.nickname}}</text>
				<text>{{item.createtime}}</text>
			</view>
          <text>{{item.score}}</text>
        </view>
		<view v-if="orderLists.length<1" class="fillings" :style="{ height: Height + 'px' }">
		  <image :src="Empty2"></image>
		  <text>暂无获得环保分记录</text>
		</view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { format, subDays } from 'date-fns';
import { toPublish } from '@mqtt';
import { errorToast} from '@/utils/prompt';
import { protection,protectionSingle } from '@/gql/team';
import { onLoad } from '@dcloudio/uni-app';
import { Empty2} from '@/utils/Static';
const props = defineProps({
  type: { type: String },
});
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);

const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
const orderLists = ref([]);
const teamId=ref('')
const driverid=ref('')
const count=ref('')
const price=ref('')

const state=ref()

const pageHeight = ref();
const Height = ref('');
const emits = defineEmits(['position']);
onLoad((pearm)=>{
	state.value=pearm.type
	const num=pearm.type=='super'?60:0
	teamId.value=pearm.id
	driverid.value=pearm.teammate
	const windowH = props.type == 'League' ? 220 : 165;
	uni.getSystemInfo({
	  success: function(res) {
	    pageHeight.value = (res.windowHeight+num - windowH).toString();
	    Height.value = (pageHeight.value - 150).toString();
	  },
	});
	if(props.type == 'League'){
		single()
	}else{
		init()
	}
})
function change([sta, en]) {
  currentPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  if(props.type == 'League'){
  	single()
  }else{
  	init()
  }
}
/**
 * 团队环保分
 */
function init() {
  isLoading.value = true;
  const payload = {
    query: protection,
    variables: {
      page: currentPage.value,
      start,
      end,
	  team_id:Number(teamId.value)
    },
  };
  toPublish('ql/team/getScoreList',payload,(obj: any) => {
      const { team_score_list } = obj.data;
      isLoading.value = false;
      orderLists.value = [...orderLists.value, ...team_score_list.list];
      lastPage.value = team_score_list.lastpage;
      count.value = team_score_list.order_count;
      price.value = team_score_list.score_count;
	  
    },
    () => {
      errorToast('通讯异常');
      isLoading.value = false;
    },
  );
}
/**
 * 个人环保分
 */
function single(){
	isLoading.value = true;
	const payload = {
	  query: protectionSingle,
	  variables: {
	    page: currentPage.value,
	    start,
	    end,
		team_id:Number(teamId.value),
		driver_id:Number(driverid.value)
	  },
	};
	toPublish('ql/team/getDriverScoreList',payload,(obj: any) => {
	    const { driver_score_list } = obj.data;
	    isLoading.value = false;
	    orderLists.value = [...orderLists.value, ...driver_score_list.list];
	    lastPage.value = driver_score_list.lastpage;
	    count.value = driver_score_list.order_count;
	    price.value = driver_score_list.score_count;
		emits('position', driver_score_list.driver_score);
	  },
	  () => {
	    errorToast('通讯异常');
	    isLoading.value = false;
	  },
	);
}
/**
 * 加载更多
 */
function loadMore() {
	if (currentPage.value < lastPage.value) {
	   currentPage.value++;
	  if(props.type == 'League'){
	  	single()
	  }else{
	  	init()
	  }
	}
}
</script>

<style scoped lang="less">
.list {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  .filling_center {
    width: 100%;
    padding: 20rpx 0px;
    box-sizing: border-box;
    .singular {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      padding: 0px 20rpx;
      box-sizing: border-box;
      view:nth-of-type(1) {
        font-size: 32rpx;
        font-weight: 400;
        color: #666666;
      }
      view:nth-of-type(2) {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        text {
          font-size: 24rpx;
        }
      }
    }
  }
  .proteList {
    width: 95%;
    margin: 2.5%;
    border-radius: 5px;
    overflow: hidden;
    // box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
    // .proteTab {
    //   width: 100%;
    //   height: 80rpx;
    //   background: #f2f2f2;
    //   text {
    //     display: inline-block;
    //     font-size: 30rpx;
    //     font-weight: 400;
    //     color: #333333;
    //     text-align: center;
    //     line-height: 80rpx;
    //   }
    // }
   //  .proteTabs:nth-child(odd) {
   //    background: white;
	  // border-bottom: 1px solid #f2f2f2;
   //  }
   //  .proteTabs:nth-child(even) {
   //    background: #f2f2f2;
   //  }
   .proteTabs:nth-of-type(1){
	   border-top: 1px solid #eee;
   }
    .proteTabs {
      width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 20rpx;
	  box-sizing: border-box;
	  border-bottom: 1px solid #eee;
	  view{
		  display: flex;
		  flex-direction: column;
		  align-items: flex-start;
		  text:nth-of-type(1){
			  font-size: 32rpx;
			  font-family: PingFangSC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #333333;
		  }
		  text:nth-of-type(2){
		  	font-size: 28rpx;
		  	font-family: PingFangSC-Regular, PingFang SC;
		  	font-weight: 400;
		  	color: #666666;
			margin-top: 10rpx;
		  }
	  }
      // text {
      //   display: inline-block;
      //   font-size: 30rpx;
      //   font-weight: 400;
      //   color: #333333;
      //   text-align: center;
      //   line-height: 80rpx;
      // }
      // text:nth-of-type(1) {
      //   width: 40%;
      // }
      // text:nth-of-type(2) {
      //   width: 30%;
      //   border-left: 1px solid #eee;
      //   border-right: 1px solid #eee;
      //   box-sizing: border-box;
      // }
      // text:nth-of-type(3) {
      //   width: 30%;
      // }
    }
  }
}

.fillings{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		width:252rpx;
		height: 252rpx;
		}
		text{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;
		}
}
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
